import React, { useState, useEffect } from 'react';
import { List, Space, Typography, Dropdown, Menu } from 'antd';
import { MoreOutlined, AppstoreOutlined, BarsOutlined, CaretUpOutlined } from '@ant-design/icons';
import styles from './textFile.module.less';

const { Text, Title } = Typography;

const TextFile = () => {
    const [textFiles, setTextFiles] = useState([]);
    const [loading, setLoading] = useState(false);
    const [viewMode, setViewMode] = useState('grid'); // 'grid' 或 'list'

    // 获取文本文件列表
    const fetchTextFiles = async () => {
        setLoading(true);
        try {
            // 模拟API调用获取文件列表
            const mockFiles = [
                {
                    id: 1,
                    name: '视频1.mp4',
                    size: '2 GB',
                    updateTime: '2023.11.17 11:11',
                    type: 'mp4',
                    icon: '/icons/mp4.png'
                },
                {
                    id: 2,
                    name: '视频2.avi',
                    size: '2 GB',
                    updateTime: '2023.11.17 11:11',
                    type: 'avi',
                    icon: '/icons/avi.png'
                },
                {
                    id: 3,
                    name: '视频3.mov',
                    size: '900 MB',
                    updateTime: '2023.11.17 11:11',
                    type: 'mov',
                    icon: '/icons/mov.png'
                },
                {
                    id: 4,
                    name: '视频4.flv',
                    size: '1.5 GB',
                    updateTime: '2023.11.17 11:11',
                    type: 'flv',
                    icon: '/icons/flv.png'
                },
                {
                    id: 5,
                    name: '视频5.wmv',
                    size: '1.5 GB',
                    updateTime: '2023.11.17 11:11',
                    type: 'wmv',
                    icon: '/icons/wmv.png'
                },
                // ... 其他视频文件

            ];
            setTextFiles(mockFiles);
        } catch (error) {
            console.error('获取文本文件失败:', error);
        }
        setLoading(false);
    };

    useEffect(() => {
        fetchTextFiles();
    }, []);

    // 文件操作菜单
    const actionMenu = (
        <Menu>
            <Menu.Item key="download">下载</Menu.Item>
            <Menu.Item key="rename">重命名</Menu.Item>
            <Menu.Item key="delete" danger>删除</Menu.Item>
        </Menu>
    );

    const headerActions = (
        <Space>
            <Text>名称</Text>
            <CaretUpOutlined />
            <AppstoreOutlined
                className={viewMode === 'grid' ? styles.activeViewMode : ''}
                onClick={() => setViewMode('grid')}
            />
            <BarsOutlined
                className={viewMode === 'list' ? styles.activeViewMode : ''}
                onClick={() => setViewMode('list')}
            />
        </Space>
    );

    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <Title level={4}>文件</Title>
                <Text type="secondary">总计: 12GB</Text>
                {headerActions}
            </div>

            <List
                grid={viewMode === 'grid' ? { gutter: 16, column: 4 } : null}
                dataSource={textFiles}
                loading={loading}
                className={styles.fileList}
                renderItem={file => (
                    <List.Item className={styles.fileItem}>
                        <div className={styles.fileCard}>
                            <img src={file.icon} alt={file.type} className={styles.fileIcon} />
                            <div className={styles.fileInfo}>
                                <Text className={styles.fileName}>{file.name}</Text>
                                <Text type="secondary" className={styles.fileDate}>{file.updateTime}</Text>
                                <Text type="secondary" className={styles.fileSize}>{file.size}</Text>
                            </div>
                            <Dropdown overlay={actionMenu} placement="bottomRight" trigger={['click']}>
                                <MoreOutlined className={styles.moreAction} />
                            </Dropdown>
                        </div>
                    </List.Item>
                )}
            />
        </div>
    );
};

export default TextFile;
